import type { IToolbarItemOptions } from '@antv/xflow'
import { createToolbarConfig } from '@antv/xflow'
import { XFlowGraphCommands, XFlowNodeCommands, IconStore } from '@antv/xflow'
import {
  SaveOutlined,
  PlusCircleOutlined,
  DeleteOutlined,
  ClusterOutlined
} from '@ant-design/icons'
import { message } from 'antd'
import type { NsGraphCmd, NsNodeCmd } from '@antv/xflow'
import { formatDataBeforeCommit } from '../utils'
import YAML from 'yaml'
import { PlayBookService } from '@/service'

namespace NsConfig {
  /** 注册icon 类型 */
  IconStore.set('PlusCircleOutlined', PlusCircleOutlined)
  IconStore.set('DeleteOutlined', DeleteOutlined)
  IconStore.set('SaveOutlined', SaveOutlined)
  IconStore.set('ClusterOutlined', ClusterOutlined)

  /** nodeId */
  let id = 1
  /** 获取toobar配置项 */
  export const getToolbarItems = async () => {
    const toolbarGroup1: IToolbarItemOptions[] = []
    const toolbarGroup2: IToolbarItemOptions[] = []
    /** 保存数据 */
    toolbarGroup1.push({
      id: XFlowNodeCommands.ADD_NODE.id,
      iconName: 'PlusCircleOutlined',
      tooltip: '添加节点',
      onClick: async ({ commandService }) => {
        const nodeName = `Node-${id}`
        commandService.executeCommand<NsNodeCmd.AddNode.IArgs>(
          XFlowNodeCommands.ADD_NODE.id,
          {
            nodeConfig: {
              id: nodeName,
              label: nodeName,
              x: 100 + id * 5,
              y: 50 + id * 5,
              width: 160,
              height: 32
            }
          }
        )
        id += 1
      }
    })
    toolbarGroup1.push({
      id: XFlowNodeCommands.MOVE_NODE.id,
      iconName: 'DeleteOutlined',
      tooltip: '删除节点',
      isEnabled: false
    })

    /** 保存数据 */
    toolbarGroup2.push({
      id: XFlowGraphCommands.SAVE_GRAPH_DATA.id,
      iconName: 'SaveOutlined',
      tooltip: '保存数据',
      onClick: async ({ commandService }) => {
        commandService.executeCommand<NsGraphCmd.SaveGraphData.IArgs>(
          XFlowGraphCommands.SAVE_GRAPH_DATA.id,
          {
            saveGraphDataService: async (meta, data) => {
              console.log(data);
              
            }
          }
        )
      }
    })

    // 一键美化

    toolbarGroup2.push({
      id: XFlowGraphCommands.GRAPH_LAYOUT.id,
      iconName: 'ClusterOutlined',
      tooltip: '一键美化',
      onClick: async ({ commandService }) => {
        commandService.executeCommand<NsGraphCmd.SaveGraphData.IArgs>(
          XFlowGraphCommands.SAVE_GRAPH_DATA.id,
          {
            saveGraphDataService: async (meta, graph) => {
              const res = await commandService.executeCommand<
                NsGraphCmd.GraphLayout.IArgs,
                NsGraphCmd.GraphLayout.IResult
              >(XFlowGraphCommands.GRAPH_LAYOUT.id, {
                layoutType: 'dagre',
                layoutOptions: {
                  type: 'dagre',
                  /** 布局方向 */
                  rankdir: 'TB',
                  /** 节点间距 */
                  nodesep: 60,
                  /** 层间距 */
                  ranksep: 30
                },
                graphData: graph
              })

              // rankdir: 'LR',
              // nodesep: 20,
              // ranksep: 80,
              const { graphData } = res.contextProvider().getResult()
              // render
              await commandService.executeCommand<NsGraphCmd.GraphRender.IArgs>(
                XFlowGraphCommands.GRAPH_RENDER.id,
                {
                  graphData: graphData
                }
              )
              // 居中
              await commandService.executeCommand<NsGraphCmd.GraphZoom.IArgs>(
                XFlowGraphCommands.GRAPH_ZOOM.id,
                {
                  factor: 'real'
                }
              )

              return { err: null, data: graph, meta }
            }
          }
        )
      }
    })
    return [
      // { name: 'nodeGroup', items: toolbarGroup1 },
      { name: 'graphGroup', items: toolbarGroup2 }
    ]
  }
}

/** wrap出一个hook */
export const useToolbarConfig = createToolbarConfig(toolbarConfig => {
  /** 生产 toolbar item */
  toolbarConfig.setToolbarModelService(async toolbarModel => {
    const toolbarItems = await NsConfig.getToolbarItems()
    toolbarModel.setValue(toolbar => {
      toolbar.mainGroups = toolbarItems
    })
  })
})
